<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            width: 300px;
            height: 300px;
            border-radius: 10px;
            background-color: red;
        }

        #btn {
            margin-left: 50px;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div>
        你的账户还剩<span id="s1"></span>元，收入<span id="s2"></span>元，支出<span id="s3"></span>元
        </br></br>
        <input placeholder="请输入收入" id="d1" />

        <input placeholder="收入标签" id="d3" />
        </br>

        <input placeholder="请输入支出" id="d2" />
        <input placeholder="支出标签" id="d4" />
        </br>
        <input type="button" value="计算"  onclick="jisuan( )"></button>

    </div>
    <script>
        var allDate = localStorage.allDate;//访问allDate
        if (allDate) {//假如之前有数据
            allDate = JSON.parse(localStorage.allDate);//将字符串转化为对象取出

        } else {
            allDate = {};
            allDate.income = [];//所有收入情况
            allDate.fee = [];//所有支出情况
            allDate.total = 0;
            allDate.totalIncome = 0;
            allDate.totalFee = 0;
        }
        s2.innerHTML ="￥"+ allDate.totalIncome;
        s3.innerHTML ="￥"+ allDate.totalFee;
        s1.innerHTML ="￥"+ allDate.total;
        function   jisuan(){
        var incomeobj = {
            money: parseFloat(d1.value),
            createTime: new Date().toLocaleString(),
            label: d3.value
        }
        allDate.income.unshift(incomeobj);
        var feeobj = {
            money: parseFloat(d2.value),
            createTime: new Date().toLocaleString(),
            label: d4.value
        }
        allDate.fee.unshift(feeobj);
        var totalIncome = 0;
        for (var i = 0; i < allDate.income.length; i++) {
            totalIncome+= allDate.income[i].money;
        }
        var  totalFee=0;
        for (var i = 0; i < allDate.fee.length; i++) {
            totalFee += allDate.fee[i].money;
        }
        var total = totalIncome - totalFee;
        allDate.totalIncome = totalIncome;
        allDate.totalFee = totalFee;
        allDate.total = total;
        s2.innerHTML ="￥"+ allDate.totalIncome;
        s3.innerHTML ="￥"+ allDate.totalFee;
        s1.innerHTML ="￥"+ allDate.total;
       
        localStorage.allDate = JSON.stringify(allDate);
        }



    </script>

</body>

</html>